import React, { useEffect, useState } from "react";
import {Card,Button,Tabs,Alert, message,Spin,Tooltip,Divider} from 'antd'
import './index.scss'
import {getThemeSubject,getBookSubject,querySubjectInfoByTaskId,configurationSubject} from 'api/index'
import {PlusCircleOutlined,DeleteOutlined,UpCircleOutlined,DownCircleOutlined} from '@ant-design/icons'
import SubjectCompontents from './subject'
const { TabPane } = Tabs;
const getLevel = (value) => {
  switch (value) {
    case 106:
      return 'A'
    case 107:
      return 'B'
    case 108:
      return 'C'
    case 109:
      return 'D'
    case 110:
      return 'E'
    case 111:
      return 'F'
    case 112:
      return 'G'
    case 113:
      return 'H'
    case 114:
      return 'I'
    case 115:
      return 'J'
    case 116:
      return 'K'
    case 117:
      return 'L'
    case 118:
      return 'M'
    case 119:
      return 'N'
    case 120:
      return 'O'
    case 121:
      return 'P'
    case 122:
      return 'Q'
    case 123:
      return 'R'
    case 124:
      return 'S'
    case 125:
      return 'T'
    case 126:
      return 'U'
    case 127:
      return 'V'
    case 128:
      return 'W'
    case 129:
      return 'X'
    case 130:
      return 'Y'
    case 131:
      return 'Z'
  }
}

const PlanSubject = (props) => {
console.log(props);

const [data,setData] = useState({})
const [tabList,setTabList] = useState([])
const [loading,setLoading] = useState(true)

  useEffect(()=>{
    
    if(!props.location.state) {
      message.error('请重新再进此页面')
      return
    }

    setLoading(true)

    const items = props.location.state?[{
      key:props.location.state[1][0].id,
      tab:'同步练',
    },...props.location.state[0][0].map(i=>{
      return {
        key:i.id,
        tab:i.fileName,
        type:i.type
      }
    })]:[]

    setData(props.location.state?props.location.state[1][0]:{})

    setTabList(items)
    

   const getSubject = async () => {
     const data = items
    if (data.length) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].type === 'LESSON') {
          const res = await getThemeSubject(data[i].key)
          data[i].subjectList = res.result?.filter(i=>i.subjectType!==4&&i.type!==4)
        } else   if (data[i].type === 'IR_BOOK') {
          const res = await getBookSubject(data[i].key)
          data[i].subjectList = res.result?.filter(i=>i.subjectType!==4&&i.type!==4)
        } else {
          const res = await querySubjectInfoByTaskId(data[0].key)
          data[i].subjectList = res.result.commonSubjectLists?.map(i=>i.subjectLists)||[]
          data[i].followSubjectLists = res.result.followSubjectLists?.map(i=>i.subjectLists)||[]
        }
      }
      setTabList(data)


      setLoading(false)
    }
  }

  getSubject()

  return () => setLoading(true)
    

  },[])// eslint-disable-line react-hooks/exhaustive-deps
  
  
  const setShow = (value,i) => {
    const data = JSON.parse(JSON.stringify(tabList))
    
    data.forEach(x=>{
       x.subjectList.forEach(j=>{
        if(j.id===value.id){
          j.showMore=i
        }
      })
       if(x.followSubjectLists){
        x.followSubjectLists.forEach(j=>{
          if(j.id===value.id){
            j.showMore=i
          }
        })
       }
    })


    setTabList(data)
  }

  const addSubject = async(value) => {
    await configurationSubject([...tabList[0].subjectList?.map(i=>{
      return {
        subjectId:i.id,
        subjectType:i.subjectType,
        sort: i.sort,
        taskId: i.paperBookId
      }
    }),...tabList[0].followSubjectLists?.map(i=>{
      return {
        subjectId:i.id,
        subjectType:i.subjectType,
        sort: i.sort,
        taskId: i.paperBookId
      }
    }),{
      subjectId: value.id,
      subjectType: [6, 7, 8].includes(value.subjectType) ? 1 : 0,
      sort: tabList[0].subjectList.length + tabList[0].followSubjectLists.length + 1,
      taskId: tabList[0].key
    }])

    const getSubject = async () => {
      const data = JSON.parse(JSON.stringify(tabList))
     if (data.length) {
       for (let i = 0; i < data.length; i++) {
         if (data[i].type === 'LESSON') {
           const res = await getThemeSubject(data[i].key)
           data[i].subjectList = res.result
         } else   if (data[i].type === 'IR_BOOK') {
           const res = await getBookSubject(data[i].key)
           data[i].subjectList = res.result
         } else {
           const res = await querySubjectInfoByTaskId(data[0].key)
           data[i].subjectList = res.result.commonSubjectLists?.map(i=>i.subjectLists)||[]
           data[i].followSubjectLists = res.result.followSubjectLists?.map(i=>i.subjectLists)||[]
         }
       }
       setTabList(data)
 
       message.success('添加成功')
     }
   }
 
   getSubject()
  }

  const removeSubject = async(value) => {

    const arr = [...tabList[0].subjectList?.map(i=>{
      return {
        subjectId:i.id,
        subjectType:i.subjectType,
        sort: i.sort,
        taskId: i.paperBookId
      }
    }),...tabList[0].followSubjectLists?.map(i=>{
      return {
        subjectId:i.id,
        subjectType:i.subjectType,
        sort: i.sort,
        taskId: i.paperBookId
      }
    })].filter(i=>i.subjectId!==value.id)
    await configurationSubject(arr)

    const getSubject = async () => {
      const data = JSON.parse(JSON.stringify(tabList))
     if (data.length) {
       for (let i = 0; i < data.length; i++) {
         if (data[i].type === 'LESSON') {
           const res = await getThemeSubject(data[i].key)
           data[i].subjectList = res.result
         } else   if (data[i].type === 'IR_BOOK') {
           const res = await getBookSubject(data[i].key)
           data[i].subjectList = res.result
         } else {
           const res = await querySubjectInfoByTaskId(data[0].key)
           data[i].subjectList = res.result.commonSubjectLists?.map(i=>i.subjectLists)||[]
           data[i].followSubjectLists = res.result.followSubjectLists?.map(i=>i.subjectLists)||[]
         }
       }
       setTabList(data)
 
       message.success('移除成功')
     }
   }
 
   getSubject()
  }
  const goBottom  = async(i, j,c) => {
    if(c===1){
      tabList[0].subjectList.splice(j, 1)
      tabList[0].subjectList.splice(j + 1, 0, i)
    } else {
      tabList[0].followSubjectLists.splice(j, 1)
      tabList[0].followSubjectLists.splice(j + 1, 0, i)
    }
    const arr = [...tabList[0].subjectList?.map((i,j)=>{
      return {
        subjectId:i.id,
        subjectType:i.subjectType,
        sort: j+1,
        taskId: i.paperBookId
      }
    }),...tabList[0].followSubjectLists?.map((i,j)=>{
      return {
        subjectId:i.id,
        subjectType:i.subjectType,
        sort: j+1,
        taskId: i.paperBookId
      }
    })]

    await configurationSubject(arr)

    const getSubject = async () => {
      const data = JSON.parse(JSON.stringify(tabList))
     if (data.length) {
       for (let i = 0; i < data.length; i++) {
         if (data[i].type === 'LESSON') {
           const res = await getThemeSubject(data[i].key)
           data[i].subjectList = res.result
         } else   if (data[i].type === 'IR_BOOK') {
           const res = await getBookSubject(data[i].key)
           data[i].subjectList = res.result
         } else {
           const res = await querySubjectInfoByTaskId(data[0].key)
           data[i].subjectList = res.result.commonSubjectLists?.map(i=>i.subjectLists)||[]
           data[i].followSubjectLists = res.result.followSubjectLists?.map(i=>i.subjectLists)||[]
         }
       }
       setTabList(data)
 
     }
   }
 
   getSubject()
  }
  const goTop = async(i, j,c) => {
    if(c===1){
      tabList[0].subjectList.splice(j, 1)
      tabList[0].subjectList.splice(j - 1, 0, i)
    } else {
      tabList[0].followSubjectLists.splice(j, 1)
      tabList[0].followSubjectLists.splice(j - 1, 0, i)
    }
    const arr = [...tabList[0].subjectList?.map((i,j)=>{
      return {
        subjectId:i.id,
        subjectType:i.subjectType,
        sort: j+1,
        taskId: i.paperBookId
      }
    }),...tabList[0].followSubjectLists?.map((i,j)=>{
      return {
        subjectId:i.id,
        subjectType:i.subjectType,
        sort: j+1,
        taskId: i.paperBookId
      }
    })]

    await configurationSubject(arr)

    const getSubject = async () => {
      const data = JSON.parse(JSON.stringify(tabList))
     if (data.length) {
       for (let i = 0; i < data.length; i++) {
         if (data[i].type === 'LESSON') {
           const res = await getThemeSubject(data[i].key)
           data[i].subjectList = res.result
         } else   if (data[i].type === 'IR_BOOK') {
           const res = await getBookSubject(data[i].key)
           data[i].subjectList = res.result
         } else {
           const res = await querySubjectInfoByTaskId(data[0].key)
           data[i].subjectList = res.result.commonSubjectLists?.map(i=>i.subjectLists)||[]
           data[i].followSubjectLists = res.result.followSubjectLists?.map(i=>i.subjectLists)||[]
         }
       }
       setTabList(data)
 
     }
   }
 
   getSubject()
  }


  return <div className="app-content plan-subject animate__animated animate__fadeIn">
   

     <Card
        style={{ width: '100%' }}
        title={'同步练'}
        // extra={<Button type={'primary'} onClick={backPlan}>返回</Button>}
      >
        <div className="titles">
          用户级别：{data.levelAppName}&nbsp;&nbsp;&nbsp;
          任务级别：{getLevel(data.levelId)}&nbsp;&nbsp;&nbsp;
          任务号：{data.serialNumber}
        </div>


      {
        !loading?<Tabs defaultActiveKey="1">
        {
          tabList?.map((i,j)=>{
            return  <TabPane key={i.key} tab={i.tab}>
             {
               j===0?<div>
                
                <Alert message="非跟读题目" type="success" />

                {
                  i.subjectList?i.subjectList.map((x,j)=>{
                    return  <div  style={{position:'relative'}} key={x.id}>

                          <SubjectCompontents subjectItem={x} setShow={setShow}  addBtn={true}></SubjectCompontents>
                          <Tooltip title="移除">
                              <Button danger className="push-icon" onClick={()=>removeSubject(x)} type="primary" shape="circle" icon={<DeleteOutlined />} />
                            </Tooltip>
                            {
                              j===0?'':<Tooltip title="上移">
                              <Button style={{right:'59px'}} className="push-icon" onClick={()=>goTop(x,j,1)} type="primary" shape="circle" icon={<UpCircleOutlined />} />
                            </Tooltip>
                            }
                             {
                              j===i.subjectList.length-1?'': <Tooltip title="下移">
                              <Button  style={{right:'100px'}} className="push-icon"onClick={()=>goBottom(x,j,2)}  type="primary" shape="circle" icon={<DownCircleOutlined />} />
                            </Tooltip>
                            }
                         
                          <Divider />
                        </div>
                  }):""
                }
                 
                <Alert message="跟读题目" type="success" />

                {
                  i.followSubjectLists?i.followSubjectLists.map((x,j)=>{
                    return  <div  style={{position:'relative'}} key={x.id}>

                    <SubjectCompontents subjectItem={x} setShow={setShow}  addBtn={true}></SubjectCompontents>
                    <Tooltip title="移除">
                              <Button danger className="push-icon" type="primary" shape="circle" icon={<DeleteOutlined />} />
                            </Tooltip>
                            {
                              j===0?'':<Tooltip title="上移">
                              <Button  style={{right:'59px'}} className="push-icon" onClick={()=>goTop(x,j)} type="primary" shape="circle" icon={<DeleteOutlined />} />
                            </Tooltip>
                            }
                             {
                              j===i.subjectList.length-1?'': <Tooltip title="下移">
                              <Button  style={{right:'100px'}} className="push-icon"onClick={()=>goBottom(x,j)}  type="primary" shape="circle" icon={<DeleteOutlined />} />
                            </Tooltip>
                            }
                    <Divider />
                  </div>
                  }):""
                }
               </div>:<div>
                  
                  {
                      i.subjectList?i.subjectList.map((x,j)=>{
                        return  <div key={x.id} style={{position:'relative'}}>

                          <SubjectCompontents count={i.subjectList.length} sort={j+1} subjectItem={x} setShow={setShow}  addBtn={true}></SubjectCompontents>
                           <Tooltip title="添加到同步练">
                              <Button onClick={()=>addSubject(x)} className="push-icon" type="primary" shape="circle" icon={<PlusCircleOutlined />} />
                            </Tooltip>
                            <Divider />
                        </div>
                      }):""
                  }

               </div>
             }
          </TabPane>
          })
        }
      </Tabs>: <Spin size="large" />
      }
      </Card>
  </div>
}

export default PlanSubject